<template>
    <div class="attribute">
        <el-form :model="result" label-width="100px">
            <template v-for="item in list" :key="Date.now() + item.type">
                <el-form-item v-if="item.type === 'select'" :label="item.label + '：'">
                    <el-select v-model="item.value" placeholder="Select">
                        <el-option v-for="option in JSON.parse(item.extendData)" :key="option.key" :label="option.label" :value="option.key"> </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item v-else-if="item.type === 'ArrayElInput'" :label="item.label + '：'"
                    >{{ item.value }}
                    <!-- <el-input v-model="item.value" :placeholder="'请输入' + item.label" /> -->
                </el-form-item>
                <el-form-item v-else-if="item.type === 'objectVal'" :label="item.label + '：'">
                    <el-input type="textarea" :autosize="{ minRows: 1, maxRows: 6 }" resize="none" v-model="item.tempStr" @change="objectChange(item)" :placeholder="'请输入' + item.label" />
                </el-form-item>
                <el-form-item v-else-if="item.type === 'ElInput'" :label="item.label + '：'">
                    <el-input type="textarea" :autosize="{ minRows: 1, maxRows: 6 }" resize="none" v-model="item.value" :placeholder="'请输入' + item.label" />
                </el-form-item>
                <el-form-item v-else-if="item.type === 'slider'" :label="item.label + '：'">
                    <el-slider v-model="item.value" :step="1" :max="24" show-stops> </el-slider>
                </el-form-item>
                <el-form-item v-else-if="item.type === 'number'" :label="item.label + '：'">
                    <el-input-number v-model="item.value" :min="0" :max="500" />
                </el-form-item>
                <el-form-item v-else-if="item.type === 'switch'" :label="item.label + '：'">
                    <el-switch v-model="item.value" />
                </el-form-item>
                <el-form-item v-else-if="item.type === 'textSingleSuffix'" :label="item.label + '：'">
                    <el-input v-model="item.value" :placeholder="'请输入' + item.label">
                        <template #append>字符</template>
                    </el-input>
                </el-form-item>
            </template>
        </el-form>
    </div>
</template>

<script>
import { ElMessage } from 'element-plus'
export default {
    props: {
        list: {
            type: Object,
            default: function () {
                return {}
            }
        }
    },
    emits: ['update:list'],
    setup(props) {
        // objectVal值变化
        function objectChange(item) {
            if (item.tempStr === '') {
                item.extendData = ''
            } else {
                try {
                    let temp = JSON.parse(item.tempStr)
                    item.extendData = temp
                } catch {
                    ElMessage({
                        message: '格式不是JSON格式，请修改正确格式',
                        type: 'error'
                    })
                }
            }
        }
        return {
            objectChange
        }
    },
    data() {
        return {
            result: []
        }
    },
    watch: {
        list: {
            handler(v) {
                // console.log('list---', this.list)
                // this.modelList = this.list
            },
            deep: true
        }
        // modelList: {
        //     handler(v) {
        //         console.log('list', v)
        //         this.$emit('update:list', v)
        //     },
        //     deep: true
        // }
    },
    mounted() {
    }
}
</script>

<style></style>
